<template>
  <div>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="evaluateData"
        border
        style="width: 90%;margin-left: 5%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" prop="casNo" />
        <el-table-column prop="casNo" label="物质编码" />
        <el-table-column prop="wzlb" label="物质类别" />
        <el-table-column prop="process" label="工艺" />
        <el-table-column prop="prove" label="证明">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getProveFiles(scope.row.casNo)">查看</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <el-button type="primary" @click="exportWord">生成报表</el-button>
    </div>
    <el-dialog title="证明文件" :visible.sync="proveVisible">
      <el-row v-for="proveFile in proveFiles" :key="proveFile.fileName">
        <el-button
          type="primary"
          @click="downloadFile(proveFile)"
        ><i class="el-icon-download el-icon--left" />
          {{ proveFile.fileName }}
        </el-button>
      </el-row>
    </el-dialog>
  </div>

</template>

<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      multipleSelection: [],
      evaluateData: [],
      proveVisible: false,
      proveFiles: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.$api.data.getEvaluateData().then((res) => {
        this.evaluateData = res.data
      })
    },
    getProveFiles(val) {
      this.$api.data.findProveByCas({ casNo: val }).then((res) => {
        console.log(res.data)
        this.proveFiles = res.data

        this.proveVisible = true
      })
    },
    downloadFile(file) {
      console.log(file.fileName)
      const params = { cas: file.casNo, filename: file.fileName }
      this.$api.data.downloadProve(params).then((res) => {
        console.log(res)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击导出word
    exportWord: function() {
      const that = this
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('../../../static/template.docx', function(error, content) {
        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }
        // 创建一个PizZip实例，内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          'test': [
            { name: '1', price: '2' },
            { name: '2', price: '5' }
          ],
          first_name: 'John',
          last_name: 'Doe',
          phone: '0652455478',
          description: 'New Website'
        })
        console.log('that.evaluateData==')
        console.log(that.evaluateData)
        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          const e = {
            casNo: error.casNo
          }
          console.log(JSON.stringify({ error: e }))
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        const date = new Date()
        saveAs(out, '环境排放评估报告' + date.toLocaleDateString() + '.docx')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  ;
  .content {
    position: absolute;
    float: left;
    top: 10%;
    left: 10%;
    right: 10%;
  }

  .bottom {
    position: absolute;
    float: left;
    bottom: 10%;
    left: 10%;
    right: 10%;
  }
</style>
